<template>
    <div>
      <div class="user-wrap">
        <div class="user-head">
          <van-row class="user-head-top">
            <van-col span="4">
              <div class="user-portrait">
                <img :src="userPortrait" @click="imgPreview">
              </div>
            </van-col>
            <van-col span="20">
              <h1>图谱大师—{{userName}}  <router-link to="/user-edit"></router-link></h1>
            </van-col>
          </van-row>
          <div class="user-head-body">
            <div class="head-body-content text-align-c">
                <van-row>
                    <van-col span="8">
                      <p>连续签到</p>
                      <h3><b>{{signDay}}</b>天</h3>
                    </van-col>
                    <van-col span="8">
                      <p>累计学习</p>
                      <h3><b>{{studyNum}}</b>课</h3>
                    </van-col>
                    <van-col span="8">
                        <p>我的积分</p>
                        <h3 style="font-size: 24px;color:#333">{{integer}}</h3>
                    </van-col>
                </van-row>
            </div>
          </div>
        </div>
        <div class='user-list'>
            <van-cell v-for="(item,index) in userList" :key="index" :title="item.title" :to="item.url" is-link>
              <template slot="icon">
                <div class="user-custom-icon"><img :src="item.icon"></div>            
              </template>
            </van-cell>
            <van-cell/>
        </div>
      </div>
      <footer-nav :oactive="active"></footer-nav>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import FooterNav from '@/components/FooterNav'
  import Cookie from 'js-cookie'
  import { Row, Col, Cell, Button, ImagePreview,Icon } from 'vant'

  export default {
    name: 'User',
    components: {
      FooterNav,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [Icon.name]: Icon
    },
    mounted(){
      this.getUserData()
    },
    data () {
      return {
        active: 2,
        userPortrait: '',
        userName: '',
        integer:0,
        signDay:0,
        studyNum:0,
        userList:[
          {
            title:'我的任务',
            icon:'/static/images/person-list-icon1.png',
            url:'/sign-in',
          },
          {
            title:'学习记录',
            icon:'/static/images/person-list-icon2.png',
            url:'/study-record',
          },
          {
            title:'我的收藏',
            icon:'/static/images/person-list-icon3.png',
            url:'/my-collection',
          },
          {
            title:'积分兑换',
            icon:'/static/images/person-list-icon4.png',
            url:'/',
          },         
          {
            title:'留言与反馈',
            icon:'/static/images/person-list-icon5.png',
            url:'/feedback',
          },
          {
            title:'我的试用',
            icon:'/static/images/person-list-icon6.png',
            url:'/on-trial',
          }
        ]
      }
    },
    methods: {
      getUserData(){
        ajax.doAction({
          url: '/user',
          type: 'POST',
          successCallback: (data) => {
            // console.log(data)
            let datas = data.data
            this.userName = datas.nickname ? datas.nickname : datas.phone
            this.userPortrait = datas.avatar ? datas.avatar : '/static/images/user-portrait-default.png'
            this.integer = datas.integer
            this.signDay = datas.sign_days
            this.studyNum = datas.studyNum
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      },
      imgPreview () {
        ImagePreview({
          images:[this.userPortrait],
          className:'previewPortrait'
        })
      },

    }
  }
</script>

<style>
.user-wrap{
  padding-bottom: 55px;
}
.user-wrap .user-head{
  background: url("/static/images/user-banner-bg.png") no-repeat center;
  width: 100%;
  height: 110px;
  background-size: 100% 100%;
  position: relative;
}
.user-wrap .user-head .user-head-top{
  padding: 35px 12px 0;
}
.user-wrap .user-head .user-portrait{
  border-radius: 50%;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border: 2px solid #fff;
  overflow: hidden;
}
.user-wrap .user-head h1{
  font-size: 15px;
  font-weight: bold;
  line-height: 46px;
  color: #fff;
}
.user-wrap .user-head h1 a{
  background: url("/static/images/user-icon1.png") no-repeat center;
  display: inline-block;
  width: 11px;
  height: 13px;
  background-size: 100% 100%;
  vertical-align: middle;
}
.user-wrap .user-head .user-head-body{
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top:100px;
  left: 12px;
  right: 12px;
  box-sizing: border-box;
  box-shadow: 0 0 15px 0 rgba(56, 160, 211, 0.2);
  overflow: hidden;
  z-index:999;
}
.user-wrap .user-body-cell h2{
  font-size: 15px;
  margin-bottom: 10px;
}
.user-wrap .head-body-content h4{
  text-align: left;
  font-size: 13px;
  margin-bottom:10px;
}
.user-wrap .head-body-content{
  padding: 20px 12px;
  font-size: 12px;
  color: #999;
}
.user-wrap .head-body-content h3{
  margin-top: 10px;
  font-size: 10px;
  font-weight: normal;
}
.user-wrap .head-body-content h3 b{
  font-size: 24px;
  font-weight: normal;
  color:#333
}
.user-wrap .user-footxt1{
  padding: 300px 0 0;
}
.user-wrap .van-cell:not(:last-child)::after{
  left: 0!important;
  right: 0!important;
}
.previewPortrait.van-image-preview .van-swipe{
    position: absolute;
    left: 12px;
    right:12px;
    top:50%;
    height: 300px!important;
    margin-top: -150px;
}
.previewPortrait .van-image-preview__index{
  display: none;
}
.user-wrap .user-list{
  padding-top:100px;
  padding-left:12px;
  padding-right:12px;
}
.user-wrap .user-custom-icon{
  width:22px;
  height:22px;
  margin-right:10px;
}
</style>
